import React, { Component } from 'react';


import { Text } from 'react-native';
import { WhiteSpace, WingBlank, Button, Toast, Flex } from '@ant-design/react-native';
import { connect } from 'react-redux';
import { Navigation } from '../UseNavigation/index';

import styles from './styles';


@connect(({ button }) => ({
  count: button.count
}))
class ButtonsContext extends Component {

  log = () => {
    console.log('this.props', this.props);
  }

  add = () => {
    let { count } = this.props;
    count++;
    this.props.dispatch({
      type: 'button/add',
      payload: { count, }
    })
  }


  goBack = () => {
    this.props.navigation.navigate('Home')
  }


  error = () => {
    const err = new Error('mock error');
    throw err;
  }

  toast = () => {
    Toast.info('toast message');
  };
  render() {
    return (
      <WingBlank>
        <Button type="primary" onPress={this.toast}>toast</Button>
        <WhiteSpace />
        <Button type="primary" onPress={this.log}>console</Button>
        <WhiteSpace />
        <Button type="primary" onPress={this.add}>add</Button>


        <Flex justify="center">
          <Text style={styles.counter}>
            Counter:{this.props.count}
          </Text>
        </Flex>

        <WhiteSpace />
        <Button type="primary" onPress={this.goBack}>goBack</Button>
        <WhiteSpace />
        <Button type="primary" onPress={this.error}>error</Button>

      </WingBlank>
    );
  }
}

export const Buttons = Navigation(ButtonsContext)